<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>解析论文页面</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<table>
    <tr class="table table-condensed">
        <td>题目</td>
        <td>作者</td>
        <td>期刊</td>
    </tr>
    <tr th:each="article:${articles}">
        <td th:text="${article.name}"></td>
        <td th:text="${article.author}"></td>
        <td th:text="${article.journal}"></td>
    </tr>
</table>
<div class="container-fluid text-center">
    <h2>遮罩层DEMO</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        打开遮罩层
    </button>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-right: 0px;">
        <div class="modal-dialog" >
            <div class="modal-content" style="margin-left: 10%;width: 800px;">
                <div class="modal-header" style="width: 1200px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <br><form id="enwSubmit"> 上传enw文件<input type="file" name="file" id="enw"> <button onclick="enwUploading()" type="button" class="btn btn-light">开始解析</button></form>
                    <br>上传文件<input type="file"> <button onclick="location='/uploading/enw'" type="button" class="btn btn-light">开始解析</button>
                    <br>上传文件<input type="file"> <button onclick="location='/uploading/enw'" type="button" class="btn btn-light">开始解析</button>
                </div>
                <!-- 隐藏在这里所解析出的数据 -->
                <div>
                    <!--dosomething-->
                    <table class="table table-striped">
                        <tr>
                            <th>题目</th>
                            <th>作者</th>
                            <th>期刊</th>
                        </tr>

                        <tr id="art">

                        </tr>

                    </table>
                </div>

                <div class="modal-footer" >
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button onclick="location.href='uploading'" type="button" class="btn btn-primary"  th:text="${temp}">

                        提交更改
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
</div>

<script th:inline="javascript">
    function enwUploading() {
        alert("执行");
        // 首先验证文件格式
        var fileName = $('#enw').val();
        if (fileName === '') {
            alert("请选择文件");
            return false;
        }
        var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1,
            fileName.length)).toLowerCase();
        if (fileType !== 'enw') {
            alert("文件格式不正确，EndNote文件！");
            return false;
        }
        var formData = new FormData($('#enwSubmit')[0]);
        // 进行提交后台的操作
        $.ajax({
            type: 'post',
            url: "/uploading/enw",
            enctype: 'multipart/form-data',
            dataType:'json',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success:function (data) {
                $("#art").append('<td>' + data.title +  '</td>'
                + '<td>' + data.author +'</td>'
                + '<td>' + data.journal +'</td>')
            },
            error:function () {
                alert("解析失败")
            }
        })
    }

</script>

</body>
</html>